<template>
	<section id="header">
		<header>
			<span class="image avatar" v-if="logo"
				><img src="../assets/img/logo.png" alt="logo"
			/></span>
			<h1 id="logo"><a href="#">{{title}}</a></h1>
			<p>
				<slot name="info"></slot>
			</p>
		</header>
		<nav id="nav">
			<ul>
				<li v-for="(item, index) in nav" :key="item.name" @click="activeIndex = index">
					<a :href="'#' + item.href" :class="[index === activeIndex ? 'active' : '']">{{
						item.name
					}}</a>
				</li>
			</ul>
		</nav>
		<footer>
			<slot name="footer"></slot>
		</footer>
	</section>
</template>

<script>
export default {
	name: "app-header",
	props: {
		nav: {
			type: Array,
			default: () => [],
		},
		title: {
			type: String,
			default: ""
		},
		logo: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			activeIndex: 0
		}
	}
};
</script>
